<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ include file="/common/taglibs.jsp"%>
<link rel="stylesheet" href="${ctx}/ui/css/imageshow.css" type="text/css">
<script type="text/javascript">
    var timstamp;

    function upload(){
        var images = $(".image_show").find("img");
        if(images.length < 9){
            $('#uploadFileInput1').click();
        }else{
            alert('图片数量达到上限最多只能上传8张图片，不能继续上传!');
        }
    }

    <%--data:{--%>
        <%--t : '${timstamp}',--%>
            <%--form_id : $("#form_id").val(),--%>
            <%--case_id : $("#case_id").val()--%>
    <%--},--%>

    function previewImg1(imgFile){
        var options = {
            url : '${ctx}/scan_upload?form_id=${form_id}&case_id=${case_id}&t='+new Date().getTime(),
            type : "POST",//提交方式
            //dataType : "json",//数据类型
            dataType : 'HTML',
            delegation: true,
            success : function(data, status) {
                addImageBox1(data);
            }
        };
        $("#uploadForm1").ajaxSubmit(options);
    }

    function getFengmianBox1(path){
        var imgPath = '${ctx}/attached/image/case_archive/'+path;
        var box = "<div class='image_box'>";
        box+="			<a class='image_fengmian'></a>";
        box+="			<a class='image_box_close' data-path='+path+' href='javascript:void(0)'>删除</a>";
        box+="			<input type='hidden' name='housepics' value='"+path+"'/>";
        box+="			<img src='"+imgPath+"'>";
        box+="	   </div>";
        return box;
    }

    $(function(){
        $.ajax({
            url: "${ctx}/lzproof/ajaxLoadImage",
            type: "post",
            data: {id:'${form_id}'},
            dataType: "json",
            success: function (json) {
                $.each(json,function(i,item){
                    if(item.imageName!=null){
                    	$('.image_show').html(addImageBox1(item.imageName));
                    }
                });
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
            }
        });
    });

    function getItemBox1(path){
        var imgPath = '${ctx}/attached/image/case_archive/'+path;
        var box = "<div class='image_box'>";
        box+="			<a class='image_box_fm'>设为封面</a>";
        box+="			<a class='image_box_close' data-path='"+path+"' href='javascript:void(0)'>删除</a>";
        box+="			<input type='hidden' name='housepics' value='"+path+"'/>";
        box+="			<img src='"+imgPath+"' name='housepics'>";
        box+="	   </div>";
        return box;
    }

    function addImageBox1(path){
        //追加box
        if(!$('.image_box').eq(0).html()){
            $('.image_show').append(getFengmianBox1(path));
        }else{
            $('.image_show').append(getItemBox1(path));
        }

        //移除box
        $(".image_show").delegate(".image_box_close","click",function(item){

            //alert($(this).attr("data-path"))
            if($(this).parents('.image_box').find('.image_fengmian').length){
                $(this).parents('.image_box').next().append('<a class="image_fengmian"></a>');
                $(this).parents('.image_box').remove();
            }else{
                $(this).parents('.image_box').remove();
            }
            //调用服务器删除方法
            var removePath = $(this).parents('.image_box').find('img').attr('src');
            var imageName = removePath.substring(removePath.lastIndexOf('/')+1,removePath.length);
            var url = "${ctx}/lzproof/delImage";
            //var param = {'path':imageName};
            $.get(url+'?path='+imageName,function (result){
                //alert(result.msg)
            });
        });

        $(".image_show").delegate(".image_box","mouseenter",function()
        {
            $(this).find('.image_box_fm').show();
        });
        $(".image_show").delegate(".image_box","mouseleave",function()
        {
            $(this).find('.image_box_fm').hide();
        });

        //设置封面
        $('.image_box_fm').click(function(){
            //img
            var sourceObj = $('.image_box').eq(0).find('img');//封面
            var targetObj = $(this).parents('.image_box').find('img');//点击box
            var sourcePath = sourceObj.attr('src');
            //调用服务器设置封面方法
            var imageName  = sourcePath.substring(sourcePath.lastIndexOf('/')+1,sourcePath.length);
            var imageName1 = targetObj.attr('src').substring(targetObj.attr('src').lastIndexOf('/')+1,targetObj.attr('src').length);
            var url = "${ctx}/setfm";
            var param = {'imageName':imageName,'imageName1':imageName1};
            $.post(url,param,function (result){
            });
            sourceObj.attr('src',targetObj.attr('src'));
            targetObj.attr('src',sourcePath);
            //hidden input
            var sourceInput = $('.image_box').eq(0).find('input');//封面
            var targetInput = $(this).parents('.image_box').find('input');//点击box
            var sourcePathInput = sourceInput.attr('value');
            sourceInput.attr('value',targetInput.attr('value'));
            targetInput.attr('value',sourcePathInput);
        });

    };

//	$("#see_dt").click(function(){
//
//	});

</script>
<%--<style>--%>
	<%--#tpyl{--%>
		<%--position: absolute;--%>
		<%--top:80px;--%>
		<%--left: 200px;--%>
		<%--width: 100%;--%>
		<%--height: auto;--%>
		<%--background:#1a1a1a;color:#F00;--%>
		<%--filter:alpha(Opacity=60);-moz-opacity:0.6;opacity: 0.6;--%>
		<%--z-index:999;--%>
	<%--}--%>
<%--</style>--%>
<%--<div style="margin:0 auto;padding:20px 20px 20px 20px;">--%>
	<%--<div id="tpyl" >--%>
		<%--<img src="${ctx}/attached/image/case_archive/1500361142718.jpg" style="width: 80%;height:800px">--%>
	<%--</div>--%>
<%--</div>--%>
<button id="see_dt">查看大图</button>
<input type="hidden" name="form_id" id="form_id" value="${form_id}"/>
<input type="hidden" name="case_id" id="case_id" value="${case_id}"/>
<input type="hidden" name="timstamp" value="${timstamp}"/>
<form id="uploadForm1" method="post" enctype="multipart/form-data">
	<fieldset>
		<legend>扫描图片上传</legend>
		<table border="0" cellspacing="0" cellpadding="0" class="image_box_table" style="margin-top: 0px;">
			<tbody>
			<tr>
				<td align="left">
					<!-- <a href="javascript:upload();" class="btnNormal" id="shot1ButtonPlaceholder"><font color="red">*</font>上传商品图片</a> -->
					<input  type="file" name="file" id="uploadFileInput1" onchange="javascript:previewImg1(this);"/>
					<font color="red">*请按页码资料顺序上传</font>
				</td>
				<td align="right">
					<%--<a  href="javascript:void(0);" onclick="showBP(0); showBox();" class="btnNormal" id="shot1ButtonPlaceholder"><font color="red">*</font>查看大图</a>--%>
				</td>
			</tr>
			<tr>
				<td></td>
				<td>
					<div class="image_show">
					</div>
				</td>
			</tr>
			</tbody>
		</table>

	</fieldset>
</form>